<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments :: head(~{::title})">
    <title>归档</title>
</head>

<body class="archives-bg">

<!--头部导航-->
<nav th:replace="_fragments :: menu(4)"></nav>

<!--时间轴内容-->
<div class="doc-container m-padded-tb-massivex m-opacity" id="doc-container">
    <th:block>
        <section class="timeline">
            <ul>

                <li class="" th:each="blog : ${blogs}">
                    <div>
                        <time th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020/01/01</time>
                        <div class="scientist">
                            <a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">
                                <h3 class="state" style="text-align:center;font-size: 16px;color: #000;"
                                    th:text="${blog.title}">文章标题</h3>
                            </a>
                        </div>
                    </div>
                </li>

            </ul>
        </section>
    </th:block>
</div>

<!--置顶图标-->
<div id="toolbar" class="m-padded-tb-large m-fixed m-right-bottom">
    <a href="#" class="ui teal icon button"><i class="chevron up icon"></i> </a>
</div>

<br>
<br>

<!--底部footer-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">

</footer>

<!--导入的script-->
<th:block th:replace="_fragments :: script">

</th:block>


<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

</script>
</body>
</html>